<template>
  <div>
    <Header />
    <Right />
    <div class="zoon"></div>
    <div class="apply">
      <div class="apply_conter">
        <p class="loan_title">
          <img src="../../assets/img/text.png" alt />
        </p>
        <div class="conter">
          <div class="conter_left">
            <p>
              <span class="title">贷款资质查询</span>
              <span class="synopsis">一键轻松获取额度，定制属于您的贷款方案</span>
            </p>
            <div style="margin-top: 20px;">
              <span class="ipt_text">房款总价:</span>
              <el-input placeholder="请输入内容" v-model="input2" type="number">
                <template slot="append">万</template>
              </el-input>
            </div>
            <div style="margin-top: 20px;">
              <span class="ipt_text">贷款比列:</span>
              <!-- <el-input placeholder="请输入内容" v-model="value">
                <template slot="append">%</template>
              </el-input>-->
              <el-select v-model="value" placeholder="单位：%">
                <el-option v-for="item in options" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </div>
            <div style="margin-top: 20px;">
              <span class="ipt_text">职&nbsp;&nbsp;&nbsp; 业&nbsp;&nbsp;&nbsp;:</span>
              <!-- <el-input placeholder="请输入内容" v-model="profession"></el-input> -->
              <el-select v-model="profession" placeholder="请选择">
                <el-option v-for="item in options1" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </div>
            <div style="margin-top: 20px;">
              <span class="ipt_text">手机号码:</span>

              <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
                <el-button slot="append">
                  <span class="obtain" v-if="show" @click="OnCode">获取验证码</span>
                  <span v-else>{{ second }}s</span>
                </el-button>
              </el-input>
            </div>
            <div style="margin-top: 20px;">
              <span class="ipt_text">验证码&nbsp;：</span>

              <el-input v-model="input" placeholder="请输入内容"></el-input>
            </div>
          </div>
          <div class="conter_right">
            <p class="title">量身定制您的贷款方案</p>
            <p class="synopsis">您买房，我帮您付钱</p>
            <div class="loan_money">
              <div class="money">
                <p class="money_title">贷款总额</p>
                <p class="money_conter">490,078,000</p>
              </div>
              <div class="money">
                <p class="money_title">贷款总额</p>
                <p class="money_conter">490,078,000</p>
              </div>
              <img src="../../assets/img/100.png" alt />
            </div>
          </div>
          <p class="conter_btn" @click="OnapplyLoan">
            <img src="../../assets/img/btn_apply.png" alt />
            <span class="conterBtn_text">立即申请</span>
          </p>
        </div>
      </div>
    </div>
    <div class="advantage">
      <div class="advantage_box">
        <img src="../../assets/img/zzd.png" alt />
        <div>
          <p class="title">快速批贷</p>
          <p class="synopsis">最快30分钟完成线上批贷</p>
        </div>
      </div>
      <div class="advantage_box">
        <img src="../../assets/img/shk.png" alt />
        <div>
          <p class="title">品种多样</p>
          <p class="synopsis">几十种金融服务方案可选</p>
        </div>
      </div>
      <div class="advantage_box">
        <img src="../../assets/img/tglg.png" alt />
        <div>
          <p class="title">高通过率</p>
          <p class="synopsis">定制金融方案通过率更高</p>
        </div>
      </div>
      <div class="advantage_box">
        <img src="../../assets/img/zsfw.png" alt />
        <div>
          <p class="title">专属服务</p>
          <p class="synopsis">全程专业金融服务人员陪同</p>
        </div>
      </div>
    </div>
    <div class="demand">
      <div class="demand_conter">
        <div>
          <p class="demand_title">贷款需求</p>
          <p class="demand_synopsis">Loan demand</p>
          <img src="../../assets/img/bt.png" alt />
        </div>
        <div class="demand_box">
          <div class="demand_item">
            <img src="../../assets/img/gedk.png" alt />
            <p class="item_title">高额房贷</p>
            <p class="item_text">产品利率：0.45%-0.75%</p>
            <p class="item_text">房贷额度：500-1000万</p>
            <p class="item_text">贷款期限：5-30年</p>
            <p class="item_btn" @click="On53">
              我要咨询
              <img src="../../assets/img/wyzx.png" alt />
            </p>
          </div>
          <div class="demand_item">
            <img src="../../assets/img/ksd.png" alt />
            <p class="item_title">快速贷</p>
            <p class="item_text">产品利率：0.50%-2.30%</p>
            <p class="item_text">房贷额度：1-50万</p>
            <p class="item_text">放款时间：最快1天</p>
            <p class="item_btn" @click="On53">
              我要咨询
              <img src="../../assets/img/wyzx.png" alt />
            </p>
          </div>
          <div class="demand_item">
            <img src="../../assets/img/dlldk.png" alt />
            <p class="item_title">低利率贷款</p>
            <p class="item_text">产品利率：0.30%-1.50%</p>
            <p class="item_text">房贷额度：1-100万</p>
            <p class="item_text">贷款期限：1-3年</p>
            <p class="item_btn" @click="On53">
              我要咨询
              <img src="../../assets/img/wyzx.png" alt />
            </p>
          </div>
          <div class="demand_item">
            <img src="../../assets/img/dmkdk.png" alt />
            <p class="item_title">低门槛贷款</p>
            <p class="item_text">产品利率：0.60%-1.50%</p>
            <p class="item_text">房款额度：20-1000万</p>
            <p class="item_text">贷款期限：1-3年</p>
            <p class="item_btn" @click="On53">
              我要咨询
              <img src="../../assets/img/wyzx.png" alt />
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="qualifications">
      <div class="demand_conter">
        <div>
          <p class="demand_title">贷款资质</p>
          <p class="demand_synopsis">Loan qualification</p>
          <img src="../../assets/img/bt.png" alt />
        </div>
        <div class="swiper">
          <el-carousel arrow="always" indicator-position="none">
            <el-carousel-item v-for="(item,index) in List" :key="index">
              <div>
                <!-- <img src="../../assets/img/zzbg.png" alt="" /> -->
                <div class="box">
                  <img src="../../assets/img/tx.png" alt />
                  <p class="swiper_img">
                    <img src="../../assets/img/zy.png" alt />
                    <span></span>
                    <img src="../../assets/img/yy.png" alt />
                  </p>
                  <p class="swiper_text">{{item.text}}</p>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
    <div class="flow">
      <div class="demand_conter">
        <div>
          <p class="demand_title font">贷款流程</p>
          <p class="demand_synopsis">Loan process</p>
          <img src="../../assets/img/bt.png" alt />
        </div>
        <div>
          <div class="flow_conter btn">
            <p class="flow_text">提交申请</p>
            <p class="flow_title">了解详情</p>
          </div>
          <div class="flow_conter btn1">
            <p class="flow_text">审核资料</p>
            <p class="flow_title">15分钟在线审核资料</p>
          </div>
          <div class="flow_conter btn2">
            <p class="flow_text">方案制定</p>
            <p class="flow_title">客户经理1v1服务</p>
          </div>
          <div class="flow_conter btn3">
            <p class="flow_text">签订合同</p>
            <p class="flow_title">不成功不收费</p>
          </div>
          <div class="flow_conter btn4">
            <p class="flow_text">资金发放</p>
            <p class="flow_title">最快一天放款</p>
          </div>
        </div>
      </div>
    </div>
    <div class="partner">
      <div class="demand_conter">
        <div>
          <p class="demand_title font">合作伙伴</p>
          <p class="demand_synopsis">cooperative partne</p>
          <img src="../../assets/img/bt.png" alt />
        </div>
        <div class="partner_box">
          <el-carousel indicator-position="outside" arrow="never">
            <el-carousel-item v-for="(item, index) in bankList" :key="index">
              <div>
                <div class="bankList">
                  <div class="bank">
                    <div v-for="(val, index) in item.img" :key="index">
                      <img :src="val" alt />
                    </div>
                  </div>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="loanShow"
      center
      class="loan_daing"
      :append-to-body="true"
      :lock-scroll="false"
      width="30%"
    >
      <p>您已经成功提交贷款信息，稍后会有客服人员与您联系，请保持手机畅通</p>
      <p class="next_btn" @click="loanShow=false">确定</p>
    </el-dialog>
    <Footer />
  </div>
</template>
<script>
import Header from "@/components/pc_file/header.vue";
import Footer from "@/components/pc_file/footer.vue";
import Right from "@/components/pc_file/right.vue";
import Recommend from "@/components/pc_file/recommend.vue";
export default {
  data() {
    return {
      input3: "",
      input2: "",
      value: "",
      input: "",
      show: true,
      timer: null,
      loanShow: false,
      second: 60,
      profession: "",
      verifyCode: "",
      options: ["10", "20", "30", "40", "50", "60", "70", "80", "90", "100"],
      options1: ["个体户", "企业白领", "企业法人", "自由工作者"],
      allHouse: [
        {
          title: "即将开拍",
          start: 0,
          home: "自由购",
          time: "开拍时间：2020-09-20 10:00:00",
          address: "朝阳 · 坞城世纪花苑 15号楼102",
          son: "1室1厅",
          centare: "125.64㎡",
          orientation: "北向",
          price: "220万(58144/㎡)",
          square: "(58144/㎡)",
          startPrice: "455万 "
        }
      ],
      List: [
        {
          text: "手里没有资金，也想要一套属于自己房子的刚需一族"
        },
        {
          text: "我已经再银行贷款了，还能再贷款吗？"
        }
      ],
      bankList: [
        {
          img: [
            require(`@/assets/img/yh1.png`),
            require(`@/assets/img/yh2.png`),
            require(`@/assets/img/yh3.png`),
            require(`@/assets/img/yh5.png`),
            require(`@/assets/img/yh7.png`),
            require(`@/assets/img/yh8.png`),
            require(`@/assets/img/yh9.png`),
            require(`@/assets/img/yh10.png`),
            require(`@/assets/img/yh11.png`),
            require(`@/assets/img/yh12.png`)
          ]
        }
      ]
    };
  },
  methods: {
    On53() {
      window.open(
        "https://tb.53kf.com/code/client/9a12bb00652ff2c013fe004ae3947f845/1",
        "_blank"
      );
    },
    OnCode() {
      this.show = false;
      this.timer = setInterval(() => {
        if (this.second > 0) {
          this.second--;
        } else {
          this.show = true;
          clearInterval(this.timer);
          this.second = 60;
          this.timer = null;
        }
      }, 1000);
      this.instance
        .getVerifyCode({
          id: this.input3
        })
        .then(res => {
          if (res.data.code == 0) {
            this.verifyCode = res.data.data;
          } else {
            clearInterval(this.timer);
            this.timer = null;
            this.show = true;
            this.second = 60;
          }
          this.$message({
            message: res.data.msg
          });
        })
        .catch(function(error) {});
    },
    OnapplyLoan() {
      if (this.input == this.verifyCode && this.input != "") {
        this.instance
          .applyLoan({
            houseTotalAmount: this.input2,
            loanRatio: this.value,
            profession: this.profession,
            telephone: this.input3,
            verifyCode: this.input
          })
          .then(res => {
            if (res.data.code == "0") {
              this.loanShow = true;
            } else {
              this.$message(res.data.msg);
            }
          })
          .catch(function(error) {});
      } else {
        this.$message("请输入正确的验证码");
      }
    }
  },
  components: {
    Header,
    Footer,
    Right
  }
};
</script>
<style lang="less" scoped>
p {
  font-size: 14px;
}
.zoon {
  height: 80px;
}
.loan_daing {
  font-size: 16px;
  .next_btn {
    cursor: pointer;
    width: 132px;
    height: 44px;
    background: #f58058;
    border-radius: 4px;
    line-height: 44px;
    margin: 30px auto;
    text-align: center;
    color: #ffffff;
  }
}
.apply {
  height: 728px;
  background: url("~@/assets/img/loan_banner.png") center center no-repeat;
  .apply_conter {
    width: 1200px;
    margin: 0 auto;
    .loan_title {
      padding: 50px;
    }
    .conter {
      overflow: hidden;
      position: relative;
      height: 500px;
      background: rgba(255, 255, 255, 0.911);
      box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.13);
      opacity: 0.96;
      border-radius: 6px;
      .conter_left {
        float: left;
        width: 595px;
        height: 100%;
        border-right: 1px solid #dcdcdc;
        padding: 62px 0 62px 48px;
        .ipt_text {
          width: 80px;
          font-size: 18px;
          color: #343434;
          margin-right: 18px;
        }
        .title {
          font-size: 26px;
          color: #3e3b3a;
          margin-right: 6px;
        }
        .synopsis {
          color: #f5643e;
          font-size: 16px;
        }
      }
      .conter_right {
        float: left;
        text-align: center;
        width: 555px;
        padding-top: 68px;
        .title {
          font-size: 24px;
          color: #3e3c3a;
          margin-bottom: 13px;
        }
        .synopsis {
          font-size: 20px;
          color: #f1623d;
          margin-bottom: 30px;
        }
        .loan_money {
          width: 406px;
          height: 240px;
          margin-left: 109px;
          padding-top: 40px;
          border: 1px solid #dcdcdc;
          border-radius: 6px;
          overflow: hidden;
        }
        .money {
          float: left;
          width: 50%;
          margin-bottom: 38px;
          .money_title {
            color: #aeb5bb;
            font-size: 20px;
          }
          .money_conter {
            color: #3e3c3a;
            font-size: 24px;
            margin-top: 10px;
          }
        }
      }
      .conter_btn {
        position: absolute;
        left: 47%;
        top: 35%;
        .conterBtn_text {
          cursor: pointer;
          position: absolute;
          left: 35%;
          top: 30%;
          width: 48px;
          height: 54px;
          font-size: 24px;
          color: #ffffff;
          line-height: 30px;
        }
      }
    }
  }
}
.advantage {
  width: 1200px;
  margin: 0 auto;
  height: 157px;
  border-left: 1px solid #dcdcdc;
  border-right: 1px solid #dcdcdc;
  .advantage_box {
    float: left;
    padding: 53px 27px;
    display: flex;
    width: 20%;
    height: 50px;
    border-right: 1px solid #dcdcdc;
    img {
      width: 46px;
      height: 46px;
      margin-right: 20px;
    }
    .title {
      font-size: 24px;
      color: #343434;
    }
    .synopsis {
      font-size: 16px;
      color: #9a9a9a;
    }
  }
  .advantage_box:last-child {
    border: none;
  }
}
.demand {
  height: 570px;
  background: #f5f5f5;

  .demand_box {
    overflow: hidden;
    margin-top: 58px;
    .demand_item {
      float: left;
      width: 282px;
      height: 265px;
      text-align: left;
      background: #ffffff;
      padding: 33px 0;
      margin-right: 22px;
      img {
        margin-left: 24px;
      }
      .item_title {
        font-size: 26px;
        color: #222;
        margin: 18px 0 16px 0;
        margin-left: 24px;
      }
      .item_text {
        font-size: 16px;
        color: #666;
        margin-left: 24px;
        padding: 3px 0;
      }
      .item_btn {
        cursor: pointer;
        margin-top: 48px;
        border-top: 1px solid #dcdcdc;
        font-size: 14px;
        color: #f5643e;
        padding-left: 24px;
        line-height: 64px;
      }
    }
    .demand_item:last-child {
      margin-right: 0px;
    }
  }
}
.demand_conter {
  width: 1200px;
  margin: 0 auto;
  padding-top: 49px;
  text-align: center;
  position: relative;
  .demand_title {
    font-size: 30px;
    color: #343434;
  }
  .demand_synopsis {
    font-size: 20px;
    color: #9a9a9a;
  }
}
.swiper {
  margin-bottom: 80px;
  .box {
    width: 844px;
    height: 230px;
    margin: 0 auto;
    margin-top: 54px;
    padding-top: 30px;
    background: url("~@/assets/img/zzbg.png") center center no-repeat;
  }
  .swiper_img {
    span {
      padding: 0 300px;
    }
  }
  .swiper_text {
    margin-top: 30px;
    font-size: 18px;
    color: #ffffff;
    padding: 0 70px;
  }
}
.flow {
  background: url("~@/assets/img/dklcbg.png") center center no-repeat;
  height: 548px;
  .font {
    color: #fff;
  }
  .flow_conter {
    float: left;
    text-align: left;
    position: absolute;
    .flow_text {
      font-size: 24px;
      color: #ffffff;
      margin-bottom: 14px;
    }
    .flow_title {
      font-size: 14px;
      color: #ffffff;
      text-align: center;
    }
  }
  .btn {
    top: 330px;
    left: 40px;
  }
  .btn1 {
    top: 400px;
    left: 270px;
  }
  .btn2 {
    top: 390px;
    left: 550px;
  }
  .btn3 {
    top: 320px;
    right: 280px;
  }
  .btn4 {
    top: 400px;
    right: 30px;
  }
}
.partner_box {
  .bankList {
    width: 1200px;
    height: 300px;
    margin: 0 auto;
    background: #ffffff;
    box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    padding: 50px 35px;
    .bank {
      overflow: hidden;
      div {
        float: left;
        width: 227px;
        height: 96px;
        margin-right: 10px;
        margin-bottom: 10px;
        background: #ffffff;
        box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.05);
        border-radius: 6px;
      }
    }
  }
}
</style>
<style scoped>
.el-input__inner {
  height: 46px;
}
.el-input {
  width: 356px;
  height: 46px;
}
.el-select {
  width: 356px;
}
</style>
